<!doctype html>
<html lang='en' xmlns:th='http://www.thymeleaf.org'>
    <head th:replace="~{commons/common::dom-head('我的论坛')}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <!-- UIkit CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>
        <!-- 自定义 CSS -->
        <link rel="stylesheet" th:href="@{/static/css/common.css}" href="../../../static/css/common.css">
        <title>首页</title>
    </head>
    <body>
        <div class="header bg-light mb-3 shadow-sm" th:replace="~{commons/common::navbar(1)}">
            <nav class="navbar navbar-expand-lg navbar-light bg-light container">
                <a th:href="@{/}" class="navbar-brand" href="#">我的论坛</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a th:href="@{/}" class="nav-link" href="#">首页 <span
                                    class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item" th:if="${session.USER != null}">
                            <a class="nav-link" href="#" th:href="@{/u/message/add}">新增</a>
                        </li>
                    </ul>
                    <a th:if="${session.USER == null}" th:href="@{/login}"
                       class="text-decoration-none text-primary">请登录</a>
                    <div class="nav-item dropdown" th:if="${session.USER != null}">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-user"></i>
                            <span class="text-primary" th:text="${session.USER.name}">用户名</span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">个人中心</a>
                            <button id="logoutBtn" class="dropdown-item"><i class="fas fa-power-off"></i> 注销</button>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="content mt-4">
            <div class="container">
                <div class="row">
                    <div class="col-md-9">
                        <div class="list-group" th:object="${pageInfo}">
                            <div class="list-group-item bg-light text-muted">
                                <h4 class="align-middle d-inline">帖子列表</h4>
                                <span class="float-right align-middle text-muted">
                                    共<h2 class="text-primary d-inline" th:text="*{total}">6</h2>篇
                                </span>
                            </div>
                            <!-- 请先登录 -->
                            <div th:if="${session.USER} == null" class="list-group-item text-muted">
                                <span class="align-middle d-inline text-warning">
                                    请先<a id="go-login-link" href="javascript:void(0)"
                                         class="btn-link text-decoration-none"> 登录 </a>才可发表帖子
                                </span>
                            </div>
                            <a href="#" class="list-group-item list-group-item-action" th:each="message : *{list}"
                               th:href="@{/message/detail(msgId=${message.id})}">
                                <!-- top -->
                                <div th:if="${message.topFlag > 0}"
                                     class="d-flex w-100 justify-content-between py-1 text-wrap text-break">
                                    <h5 class="mb-1 text-primary">
                                        <span class="badge badge-danger">顶</span>
                                        <span th:if="${message.niceFlag > 0}"
                                              class="badge badge-warning text-white mr-2">精</span>
                                        [[${message.title}]]
                                    </h5>
                                    <small th:text="${#dates.format(message.replyTime, 'MM:dd HH:mm')}">14:20</small>
                                </div>
                                <!-- no top -->
                                <div th:if="${message.topFlag == 0}"
                                     class="d-flex w-100 justify-content-between py-1 text-wrap text-break">
                                    <h5 class="mb-1 text-primary">
                                <span th:if="${message.niceFlag > 0}"
                                      class="badge badge-warning text-white mr-2">精</span>
                                        [[${message.title}]]
                                    </h5>
                                    <small th:text="${#dates.format(message.replyTime, 'MM:dd HH:mm')}">14:20</small>
                                </div>
                                <div class="m-margin-top-small w-75 py-1">
                                    <span class="mb-1 text-justify text-wrap text-break font-weight-light"
                                          th:text="${#strings.abbreviate(message.content, 100)}">
                                        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是...
                                        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是...
                                    </span>
                                </div>
                                <div class="m-margin-top-small py-1">
                                    <img th:if="${message.user.thumb != null && message.user.thumb != ''}"
                                         th:src="${message.user.thumb}"
                                         src="../../../static/img/user.jpg" class="rounded-circle" width="20px">
                                    <img th:if="${message.user.thumb == null || message.user.thumb == ''}"
                                         th:src="@{/static/img/user.jpg}"
                                         src="../../../static/img/user.jpg" class="rounded-circle" width="20px">
                                    <small class="small text-primary" th:text="${message.user.name}"> ajun </small>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <i class="far fa-comment-dots"></i>
                                    <small class="small" th:text="${message.replyName}"> ajun </small>
                                    <span class="badge badge-primary badge-pill float-right"
                                          th:text="${message.numReply}">
                                        14
                                    </span>
                                </div>
                            </a>

                            <div class="list-group-item" style="padding-bottom: 0" th:if="${pageInfo.pages} > 1">
                                <div class="pager float-right">
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination justify-content-center">
                                            <li class="page-item" th:classappend="*{hasPreviousPage} ? '' : 'disabled'">
                                                <a class="page-link" th:if="*{prePage > 0}"
                                                   th:href="@{/messages(pageNum=*{pageNum}-1)}"
                                                   aria-label="Previous" aria-disabled="true">上一页</a>
                                                <a class="page-link" th:if="*{prePage <= 0}"
                                                   th:href="@{/messages(pageNum=1)}"
                                                   aria-label="Previous" aria-disabled="true">上一页</a>
                                            </li>
                                            <li class="page-item" th:each="num : *{#numbers.sequence(from, to)}"
                                                th:classappend="(${num} == *{pageNum}) ? 'active' : ''">
                                                <a th:href="@{/messages(pageNum=${num})}" th:text="${num}"
                                                   class="page-link"
                                                   href="#">1</a>
                                            </li>
                                            <li class="page-item" th:classappend="*{hasNextPage} ? '' : 'disabled'">
                                                <a th:if="*{nextPage < pages}"
                                                   th:href="@{/messages(pageNum=*{pageNum}+1)}"
                                                   aria-disabled="true" class="page-link">下一页</a>
                                                <a th:if="*{nextPage >= pages}"
                                                   th:href="@{/messages(pageNum=*{pages})}"
                                                   aria-disabled="true" class="page-link">下一页</a>
                                            </li>
                                        </ul>
                                        <div class="text-primary text-center">
                                            <span>第 <span th:text="*{pageNum}">1</span> 页</span>
                                            /
                                            <span>共 <span th:text="*{pages}">10</span> 页</span>
                                        </div>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="row-cols-1">
                            <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img th:src="@{/static/img/carousel1.jpg}"
                                             src="../../../static/img/carousel1.jpg"
                                             class="d-block w-100 img-thumbnail rounded" alt="carousel">
                                    </div>
                                    <div class="carousel-item">
                                        <img th:src="@{/static/img/carousel2.jpg}"
                                             src="../../../static/img/carousel2.jpg"
                                             class="d-block w-100 img-thumbnail rounded" alt="carousel">
                                    </div>
                                    <div class="carousel-item">
                                        <img th:src="@{/static/img/carousel3.jpg}"
                                             src="../../../static/img/carousel3.jpg"
                                             class="d-block w-100 img-thumbnail rounded" alt="carousel">
                                        <div class="carousel-caption d-none d-md-block">
                                        </div>
                                    </div>
                                    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
                                       data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
                                       data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                            <div class="row-cols-1 mt-5" th:if="${niceMsgList.size() > 0}">
                                <div class="card bg-info text-white">
                                    <div class="card-header">
                                        <span class="badge badge-warning text-white mr-2">精</span>
                                        <span>精华帖</span>
                                    </div>
                                    <div class="list-group list-group-flush">
                                        <a th:each="niceMsg : ${niceMsgList}"
                                           th:href="@{/message/detail(msgId=${niceMsg.id})}"
                                           th:text="${#strings.abbreviate(niceMsg.title, 12)}"
                                           href="#" class="list-group-item list-group-item-action text-center">
                                            Vue是什么？
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="row-cols-1 mt-5" th:if="${newMsgList.size() > 0}">
                                <div class="card bg-info text-white">
                                    <div class="card-header">
                                        <span class="badge badge-warning text-white mr-2">新</span>
                                        <span>最新推荐</span>
                                    </div>
                                    <div class="list-group list-group-flush">
                                        <a th:each="newMsg : ${newMsgList}"
                                           th:href="@{/message/detail(msgId=${newMsg.id})}"
                                           th:text="${#strings.abbreviate(newMsg.title, 12)}"
                                           href="#" class="list-group-item list-group-item-action text-center">
                                            Vue是什么？
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" th:replace="~{commons/common::footer}">
            <hr>
            <div class="text-center">
                <p class="small text-muted m-0">
                    <span id="span"></span> | All Right Reserved © 2020 Designed by AJun
                </p>
                <a class="text-decoration-none text-muted small m-0" target="_blank"
                   href="http://www.beian.miit.gov.cn/">
                    备案号: 陕ICP备19017955号
                </a>
            </div>
            <script type="text/javascript">
                function runtime() {
                    // 初始时间，日/月/年 时:分:秒
                    X = new Date("5/30/2020 12:28:00");
                    Y = new Date();
                    T = (Y.getTime() - X.getTime());
                    M = 24 * 60 * 60 * 1000;
                    a = T / M;
                    A = Math.floor(a);
                    b = (a - A) * 24;
                    B = Math.floor(b);
                    c = (b - B) * 60;
                    C = Math.floor((b - B) * 60);
                    D = Math.floor((c - C) * 60);
                    //信息写入到DIV中
                    span.innerHTML = "小站已勉强运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
                }

                setInterval(runtime, 1000);
            </script>
        </div>

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
        <script th:src="@{/static/js/bootstrapQ.js}" src="../../static/js/bootstrapQ.js"></script>
        <script th:inline="javascript">
            /* 请先登录 */
            $('#go-login-link').click(function () {
                let loginUri = /*[[@{/login}]]*/'';
                location.href = loginUri + '?ret=' + location.href;
            });

            /* 用户注销 */
            $('#logoutBtn').click(function () {
                $.ajax({
                    url: /*[[@{/logout.do}]]*/'',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            location.href = /*[[@{/}]]*/'';
                        }
                    },
                    error: function () {
                        bootstrapQ.msg({msg: '网络异常', type: 'danger', time: 2000});
                    }
                });
            });
        </script>
    </body>
</html>